<template>
    <n-layout has-sider>
        <n-layout-sider bordered collapse-mode="width" :collapsed-width="58" :width="160" :height="1000"
            :collapsed="collapsed" show-trigger @collapse="collapsed = true" @expand="collapsed = false">
            <n-menu :options="menuOptions" :default-expanded-keys="defaultExpandedKeys"
                @update:expanded-keys="handleUpdateExpandedKeys" />
        </n-layout-sider>
        <n-layout class="h-screen">
            <router-view />
        </n-layout>
    </n-layout>
</template>

<script setup>
import { h, ref, onMounted, watchEffect } from "vue";
import { NIcon, useMessage } from "naive-ui";
import { RouterLink } from "vue-router";
import { LogPrint, EventsOn, EventsOff } from "../../wailsjs/runtime"

import {
    DocumentOutline,
    HomeOutline,
    ImageOutline,
    CodeOutline,
    PersonCircleOutline,
    BookOutline,
    ArrowDownOutline,
    EyeOutline,
    ArrowUpOutline,
    CloseOutline,
} from "@vicons/ionicons5";
const renderIcon = (icon) => {
    return () => h(NIcon, null, { default: () => h(icon) });
}

onMounted(() => {

})


watchEffect(() => {

})

const menuOptions = [
    {
        label: () => h(
            RouterLink,
            {
                to: {
                    name: "tables"
                }
            },
            { default: () => "表格模拟" }
        ),
        key: "tables",
        icon: renderIcon(BookOutline),
    },
    {
        label: () => h(
            RouterLink,
            {
                to: {
                    name: "books"
                }
            },
            { default: () => "书籍管理" }
        ),
        key: "books",
        icon: renderIcon(BookOutline),
    },
    {
        label: () => h(
            RouterLink,
            {
                to: {
                    name: "users"
                }
            },
            { default: () => "用户管理" }
        ),
        key: "users",
        icon: renderIcon(PersonCircleOutline)
    },
    {
        label: () => h(
            RouterLink,
            {
                to: {
                    name: "loans"
                }
            },
            { default: () => "借阅管理" }
        ),
        key: "loans",
        icon: renderIcon(EyeOutline)
    },
];

const activeKey = ref(null);
const collapsed = ref(false);
const defaultExpandedKeys = ["books"]

const handleUpdateExpandedKeys = (keys) => {
}
</script>
<style>
.n-layout-sider.n-layout-sider--show-content .n-layout-sider-scroll-container {
    height: 100vh !important;
}

.n-menu-item-content {
    padding-left: 17px !important;
}
</style>